<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>生产代码-配置表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <link href="__PUBLIC__/Back/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <form action="{:U('set')}" method="post" enctype="multipart/form-data" id="form-code" class="form-horizontal">
            <div class="form-group required">
                <label class="col-sm-2 control-label" for="input-table">表</label>
                <div class="col-sm-8">
                    <input type="text" name="table" value="" placeholder="表名" id="input-table" class="form-control"/>
                </div>
            </div>

            <div class="form-group required">
                <label class="col-sm-2 control-label" for="input-comment">备注</label>
                <div class="col-sm-8">
                    <input type="text" name="comment" value="" placeholder="中文" id="input-comment" class="form-control"/>
                </div>
            </div>

            <div class="form-group required">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <input type="button" id="input-field" value="配置字段" class="form-control"
                           data-url="{:U('ajax')}"/>
                </div>
                <div class="col-sm-1"></div>
            </div>

            <div class="row" id="row-fieldHead">
                <div class="col-sm-2 text-right">字段</div>
                <div class="col-sm-2">备注</div>
                <div class="col-sm-2 text-center">列表</div>
                <div class="col-sm-2 text-center">排序</div>
                <div class="col-sm-2 text-center">设置</div>
            </div>

            <div class="form-group required">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <input type="submit" id="input-submit" value="生成" class="form-control"/>
                </div>
                <div class="col-sm-1"></div>
            </div>

        </form>
    </div>
    <script src="__PUBLIC__/Back/jquery/jquery-2.1.1.min.js"></script>
     <script >
         $(function() {
             $('#input-field').click(function(evt) {
                 // 还是将URL的解析,放在DOM元素上
                 var url = $(this).data('url');
                 // 需要当前表名, 作为数据
                 var data = {
                     table: $('#input-table').val(),
                 };
                 // 获取数据, 使用$.get
                 $.get(url, data, function(response) {
                     var html = '';
                     $.each(response.fields, function(i, field) {
                         html += '<div class="row">' +
                             '<input type="hidden" name="fields['+field+'][name]" value="'+field+'">' +
                             '<label class="col-sm-2 control-label" for="input-table">'+field;
                         if (field == response.pk_field) html +='(PK)';
                         html += '</label>' +
                             '<div class="col-sm-2">' +
                             '<input type="text" value="" name="fields['+field+'][comment]" class="form-control">' +
                             '</div>' +
                             '<div class="col-sm-2">' +
                             '<input type="checkbox" name="fields['+field+'][list]" value="1" class="form-control">' +
                             '</div>' +
                             '<div class="col-sm-2">' +
                             '<input type="checkbox" name="fields['+field+'][sort]" value="1" class="form-control">' +
                             '</div>' +
                             '<div class="col-sm-2">' +
                             '<input type="checkbox" name="fields['+field+'][set]" value="1" class="form-control">' +
                             '</div>' +
                             '</div>';
                     });
                     // 加入DOM中
                     $('#row-fieldHead').after(html);

                 }, 'json');

                 // 阻止 按钮的默认事件, 表单中的按钮, 很多浏览器都会解析成提交
                 evt.preventDefault();
             });
         });
     </script>
</body>
</html>